<template>
  <div id="app">
    <div style="width:50%" class="container">
      <div>
        <h3>Regist</h3>
        <h5>Email</h5>
        <input type="text" class="form-control" v-model="mail"/><br/>
        {{mail}}
        <h5>Password</h5>
        <input type="password" class="form-control" v-model="password"/><br/>
        {{password}}
        <h5>Gender</h5>
        <input type="radio" name="gender" v-model="gender" value="female"/>男
        <input type="radio" name="gender" v-model="gender" value="male"/>女<br/>
        <h5>Hobby</h5>
        <input type="checkbox" name="hobby" v-model="hobby" value="music">音乐
        <input type="checkbox" name="hobby" v-model="hobby" value="movie">电影
        <input type="checkbox" name="hobby" v-model="hobby" value="sport">运动
        <br/>
        <button type="button" class="btn btn-success" @click="registfn">注册</button>
        <button type="button" class="btn btn-success" @click="registfn2">注册2</button>
        <button type="button" class="btn btn-success" @click="testQs">测试</button>
      </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'

  export default {
    name: "Reg",
    data() {
      return {
        mail: "",
        password: "",
        gender: "",
        hobby: []
      }
    },
    methods: {
      /*
      $.ajax({
        url:"",
        type:"",
        data:xxxx,
        success:function(result){}
      })
       */
      registfn: function () {
        //使用axios
        this.axios({
          //填写异步请求的各种参数,method:get post put delete ,url:请求路径,data(设置请求体的数据):专用用于对应post put
          url: "http://localhost:8081/test/t2?mail=" + this.mail
            + "&password=" + this.password,
          method: "get"
        }).then(function (resposne) {
          //请求成功调用 回调函数
          console.log(resposne);
          //服务器响应的数据
          console.log(resposne.data)
        })
      },
      registfn2: function () {
        this.axios({
          url: "http://10.36.141.177:8081/test/t2",
          method: "post",
          transformRequest: [//作用:在请求发出之前,帮我们处理数据,数据的转换
            function (data) {
              // alert(JSON.stringify(data));
              var a = qs.stringify(data);
              return a;
            }
          ],
          data: {
            /* 设置请求体的数据 */
            /* 前面(请求数据的key):后台(请求数据的value) */
            /* application/x-www-form-urlencoded */
            /* 自动转为json类型数据,所以接受的后台必须使用@requestbody进行接受 */
            mail: this.mail,
            password: this.password,
            gender: this.gender,
            hobby: this.hobby
          }
        }).then(function (response) {
          console.log(response)
        })


      },
      testQs: function () {
        var word = "ename=zs&age=19&esex=男";
        // 把k-v的url参数转为json数据
        var a = qs.parse(word);
        alert(JSON.stringify(a));
        //把json数据转为k-v的url参数
        var b = qs.stringify(a);
        alert(b);
      }

    }
  }
</script>

<style scoped>

</style>
